Jump to content
Sign in to follow this  
peterp

implementing third party jquery

Recommended Posts

Hi All,

       I have a plugin that I wish to install into cubecart and it is not part of the extensions market place. I'm very new at JavaScript and how to implement it into a cubecart store. The plugin  allows for the Plus Sign and the Minus sign to be used when entering the order quantity instead of the up arrow and down arrow. I have identified two programs that would need to be able to recognise that a JavaScript would be used, the 2 programs are for the etrend skin and they are content.product.php and round line 68 - 69   and content.homepage.php around line 38-39 I'm hoping somebody can point me the direction where I can find some step by step instructions on how to achieve this.

Best Regards,

Peterp

Share this post


Link to post
Share on other sites

Posted (edited)

Please note that in eTrend's template main.php, there is:

{include file='js/common.html'}

The common.html is a file provided by CubeCart for any skin (all CC5 skins use this) to start the sequence that eventually gets jQuery itself (version 1.7 from Google's repository) and then any and all jquery plugins sent to the browser.

This file has a <script> link for:

<script type="text/javascript" src="{$STORE_URL}/js/plugins.php"></script>

The plugins.php is code that gathers up all files found in the /js/plugins/ folder and sends them out to the browser.

Thus, any jquery plugin you wish for your CC5-based skin (of which is eTrend) to use can be placed in CubeCart's /js/plugins/ folder.

We can assume you have made the necessary edits to the templates' Quantity form elements to show the spinners?

Edited by bsmither

Share this post


Link to post
Share on other sites

Hi Brian,

        Thankyou so much for your explanation unfortunately I have no idea what I have to do to edit the necessary templates for the Quantity form. I think the programs that have to be modified are content.product.php  around line 68 - 69 and content.homepage.php around line 38-39, javascript is not my strong point so if you could give me some direction I will greatly appreciate it.

Best Regards,

Peterp

Share this post


Link to post
Share on other sites

We would need to know exactly where you got the plugin, so we can follow along with their installation instructions.

Correct on the template content.product.php line number, but content.homepage.php does not have a quantity selector. (One could easily be added.)

 

Share this post


Link to post
Share on other sites

Hi Brian,

        The url of the javascript I'm trying to implement is https://www.jqueryscript.net/form/spin-numbers-plus-minus-buttons.html.

Basically what I'm trying to do is have a plus sign and a minus sign either side of the quantity so that by clicking on either the value of the quantity field is increased or decreased but doesn't go below 1, there is no maximum value.

I hope this helps

best regards,

peterp

 

Share this post


Link to post
Share on other sites
Posted (edited)

The solution is a bit more involved than usual. It starts with realizing that CubeCart provides an HTML segment available to all CC5-based skins (that wish to use it) that has a link to the JQuery library hosted at Google. The version requested is the latest in the 1.7 family.

This spinner module is best executed using a later version of JQuery. The plugin demo used version 3.3.1, but that version caused some unsolvable problems with the other javascript plugins that CubeCart includes.

So, we will use version 2.2.4. Even this version has removed some functions that a few of the plugins use, but we will make the necessary changes to those plugins.

The reason why I want to move away from version 1.7.x is because when clicking on the incrementer and decrementer buttons, the "+" and "-" gets "highlighted" as if the mouse is selecting that text. It then looks really odd. JQuery 2+ seems to have solved that.

Please make these edits:

In /js/common.html, find:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.7/jquery-ui.min.js"></script>

Change to:

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

In the file /js/plugins/jquery.filetree.js, near line 190, find:

$('img.imgtoggle').live('click', function(){

Change to:

$('img.imgtoggle').on('click', function(){

Near line 224, find:

$('img.checkbox').live('click', function(){

Change to:

$('img.checkbox').on('click', function(){

In the file /js/plugins/jquery.rating.min.js, near line 11, find JUST THIS PART:

;if(window.jQuery)(function($){if($.browser.msie)try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};

Change JUST THAT PART to:

;if(window.jQuery)(function($){/*if($.browser.msie)try{document.execCommand("BackgroundImageCache",false,true)}catch(e){};*/

In the file /js/common.js, near line 187, find:

$('.insert-text').live('click', function(){

Change to:

$('.insert-text').on('click', function(){

Near line 459, find:

$('.check-primary').live('click', function(){

Change to:

$('.check-primary').on('click', function(){

In the eTrend skin template main.php, find:

    {/literal}
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/enquire.min.js",
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/superfish.js",
    "{$STORE_URL}/skins/{$SKIN_FOLDER}/js/script.js"
    {literal}
]);
</script>


On a new blank line just after that, add:

<script type="text/javascript">$("#counter-one").htmlNumberSpinner();</script>

In the eTrend skin template content.product.php, find:

	<div class="add_to_basket">
		<input type="text" name="quantity" value="1" class="quantity required" />
		<input type="hidden" name="add" value="{$PRODUCT.product_id}" />

Change to:

	<div class="add_to_basket">
{*	<input type="text" name="quantity" value="1" class="quantity required" />	*}
		<div id="counter-one" class="counter" min="1" max="999" style="display:flex;margin-bottom:20px;"></div>
		<input type="hidden" name="add" value="{$PRODUCT.product_id}" />

Regarding the JQuery spinner plugin:
Copy the file plugin.js to CubeCart's /js/plugins/ folder and rename that file to jquery.htmlNumberSpinner.js, then make this edit:

Near line 5, find:

$(this).append("<div class='btn decrementer'>-</div> <input class='number-input' type='number'/> <div class='btn incrementer'>+</div>");

Change to:

$(this).append("<div class='btn decrementer'>-</div> <input class='number-input' type='text'/> <div class='btn incrementer'>+</div>");

In the jquery.htmlNumberSpinner.js file, you will find the CSS rules for the incrementer and decrementer buttons. Adjust to suit.

 

Edited by bsmither

Share this post


Link to post
Share on other sites

hello bsmither this mod also interests me but can you tell me if for the skin foundation is the same modification?

Share this post


Link to post
Share on other sites

In the template element.call_to_action.php, and the plugin code itself gets placed in the skin folder, but practically no other edits are applicable.

Share this post


Link to post
Share on other sites

Hi Brian,

            Thanks so much for the direction and changes they do what I need, unfortunately when the plus sign is used and the buy button is selected it does not add the updated qty to the basket it remains at one.

Also I want to have every  product to have the same functionality at the moment only the first item has the plus and minus capability, I will also like to have the same functionality in category display and also latest products .

I have attempted to try and modify the content .homepage and the content.category programs with no luck.

If you could please help me I will be very appreciative.

Share this post


Link to post
Share on other sites

Well, one would think if the plugin is going to create an input form element, it would work.

Make these edits:

In jquery.htmlNumberSpinner.js, change to:

        /* creating the counter buttons */
        $(this).append(
          "<div class='btn decrementer'>-</div>"
        + "<input class='number-input " + $(this).attr("class") + "' type='text' name='" + $(this).attr("name") + "'/>"
        + "<div class='btn incrementer'>+</div>");

In the skin template, change to:

<div id="counter-one" name="quantity" class="quantity required" min="1" max="999" style="display:flex;margin-bottom:20px;"></div>

"at the moment only the first item has the plus and minus capability"

So, you are wanting to have spinners on each product panel (the panels being in content.category.php and content.homepage.php)?

Share this post


Link to post
Share on other sites

The reason why only the first works in a set of panels (on a Category page, for example) is because we are using the ID of the node. Generally, nodes on a web page must have unique ID values.

So, we will use an alternate means of selecting the nodes. Make these edits:

In the template main.php, change to:

<script type="text/javascript">$("[rel='counter-one']").htmlNumberSpinner();</script>

In the template content.product.php, change to:

<div rel="counter-one" name="quantity" class="quantity required" min="1" max="999" style="display:flex;margin-bottom:20px;"></div>

In the template content.category.php, find:

<input type="hidden" name="add[{$product.product_id}][quantity]" value="1" class="quantity" />

Change to:

{* <input type="hidden" name="add[{$product.product_id}][quantity]" value="1" class="quantity" /> *}
<div rel="counter-one" name="add[{$product.product_id}][quantity]" class="quantity" min="1" max="999" style="display:flex;margin-bottom:20px;"></div>

In the template content.homepage.php, find:

<input type="hidden" name="add" value="{$product.product_id}" />
{if $product.ctrl_stock && !$CATALOGUE_MODE}

On a new blank line after that, add:

<div rel="counter-one" name="quantity" class="quantity required" min="1" max="999" style="display:flex;margin-bottom:20px;"></div>

 

Share this post


Link to post
Share on other sites

Hi Brian,

      I have applied all of these changes and it all works.

Thankyou so much you have again saved my bacon and it is very much appreciated.

Best Regards,

Peterp

Share this post


Link to post
Share on other sites

Hi Brian,

         I have just been doing some more testing and have found that when I select the drop down menu 'Sale Items' and then select an item that has a minimum qty and I make sure that the minimum quantity is ordered then I get a error message saying that this item requires a minimum order quantity. When I select it from the home page then all is fine it seems just the sale items menu selection does have the selected quantity updated. I have tried looking for where this is done but I don't seem to be able to find the correct program.

Could you point me in the direction to find the correct program because it probably only needs the same changes that we have already done and if I can find the program I will be able to do the changes

Your help is appreciated

Best Regards,

Peterp

Share this post


Link to post
Share on other sites
Posted (edited)

For the past few versions, CubeCart offers to set a minimum quantity required for a product (Pricing tab). Also, it is up to the skin to show a quantity selector on the Homepage and Category pages. (Foundation does, eTrend does not - that is, not until it was added just now.)

Clicking Add to Basket on the Homepage or View Category (includes Sale Items and Search Results) having given a quantity less than the minimum set for that product should bounce you to that View Product page, which has the warning.

Giving a quantity above the minimum set should simply add that product to the shopping basket.

However, it seems that the View Category page is sending the wrong product ID value. The POSTed data is something like: add[16][quantity]=11, where 16 is the product_id of the product whose Buy button was clicked - the third product in the list, for example. In actuality, the POSTed data is: add[15][quantity]=11, where 15 is the product_id of the first product in the list, and this first value is used across all products in the list.

Now, the jQuery docs strongly suggest that the collection of elements (product panels with added spinners) will be implicitly iterated -- presumably using the corresponding values of the source <div>. Unfortunately, that seems to not be the case.

Please make this edit to jquery.htmlNumberSpinner.js:

Change the first eleven lines to:

(function($) {
    $.fn.htmlNumberSpinner = function () {

        /* creating the counter buttons */
        $(this).each(function(){
          $(this).append(
          "<div class='btn decrementer'>-</div>"
        + "<input class='number-input " + $(this).attr("class") + "' type='text' name='" + $(this).attr("name") + "'/>"
        + "<div class='btn incrementer'>+</div>"
          );
        });

I think this isn't perfect. Specifically, the section of code that acquires the dynamic attributes would also need to be inside the each() section. That would solve a problem if we wanted to use what CubeCart provides as the product's minimum quantity and apply it to the spinner (currently coded at 1) so that one couldn't spin lower than that.

Edited by bsmither

Share this post


Link to post
Share on other sites

Hi Brian,

         I have made the changes that you suggested to the jquery and the result is that all seems to work perfectly as usual, I will continue to keep testing however I'm sure all is well.

Thanks again for your valued help it is very much appreciated.

Best Regards,

Peterp

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...