Stop variations from being preselected
By default, when loading a product with variations, Neto by Maropost will load the parent product first, then select a variation of the product as a default to load the values in the ajax templates. To turn off this functionality, follow the instructions in this article.
Preparation Checklist
Before you start this tweak, it's a good idea to run through our Preparation Checklist below:
- Read through the Introduction to Neto by Maropost Document to get a better sense of how the Control Panel, Database and Front End store interact.
- Learn our recommended Simple Workflow. This makes the implementation process as easy as possible.
- Create a new Staging Theme for this tweak. This allows you to preview any changes before they are visible to live customers.
Coding Instructions
Step 1: Open the buying options template
The product buying options template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/products/includes/buying_options.template.html
.
Step 2: Add the code into the template
Paste the following code into the template replacing the existing [%IF [@store_quantity@] > 0 AND [@preorder@] %]
section highlighted here.
[%if [@has_variation@]%]
<a class="btn btn-success btn-block btn-lg btn-ajax-loads disabled" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>">Select Options</a>
[%else%]
[%if [@available_preorder_quantity@] > 0 AND [@preorder@] AND [@config:WEBSTORE_USE_PREORDER_QUANTITY@]%]
<button type="button" title="Add [@model@] to Cart" class="addtocart btn btn-warning btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" rel="[@rndm@][@SKU@]"><i class="fa fa-clock icon-white" aria-hidden="true"></i> Pre-Order Now</button>
[%elseif [@store_quantity@] > 0 AND [@preorder@] AND ![@config:WEBSTORE_USE_PREORDER_QUANTITY@]%]
<button type="button" title="Add [@model@] to Cart" class="addtocart btn btn-warning btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" rel="[@rndm@][@SKU@]"><i class="fa fa-clock icon-white" aria-hidden="true"></i> Pre-Order Now</button>
[%elseif [@store_quantity@] > 0 AND ![@preorder@] %]
<button type="button" title="Add [@model@] to Cart" class="addtocart btn btn-success btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" rel="[@rndm@][@SKU@]"><i class="fa fa-shopping-cart icon-white" aria-hidden="true"></i> Add to Cart</button>
[%elseif [@store_quantity@] < 1 AND [@config:ALLOW_NOSTOCK_CHECKOUT@] %]
<button type="button" title="Add [@model@] to Cart" class="addtocart btn btn-warning btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" rel="[@rndm@][@SKU@]"><i class="fa fa-clock icon-white" aria-hidden="true"></i> Backorder</button>
[%else%]
<a href title="Notify Me When [@model@] Is Back In Stock" class="btn btn-info btn-block btn-lg btn-ajax-loads" data-loading-text="<i class='fa fa-spinner fa-spin' style='font-size: 14px'></i>" data-toggle="modal" data-target="#notifymodal"><i class="fa fa-envelope" aria-hidden="true"></i> Notify Me</a>
[%/if%]
[%/if%]
Step 3: Open the child products template
The child products template can be found here /httpdocs/assets/themes/[THEME-NAME]/templates/products/includes/child_products.template.html
.
Step 4: Add the code into the template
Look for [%param *variation_header_select%]
and add the following code below the select
element highlighted here.
<option selected disabled>Select [@specific_name@]</option>
Step 5: Update Advanced Configuration
The final step is to update the advanced configuration PRESELECT_VARIATION
to No
.
This configuration can be found within your control panel: Settings & Tools > Advanced Configuration
Your variation products will no longer select a variation by default and will disable buying options until the customer has selected a variation to purchase.