1 Comment

Dynamically updating the sku on the product page of a configurable product based on selected options

Magento Admin - Catalog Product New - Delete Select Values
Custom select on product doesnt grey option if not available e.g. Size: L not available in “Black”

I’ve successfully got the attributes to update dynamically for the SKU on the product page based on the simple product selected (through help found on the web).

I’m now trying to apply this logic to selected custom options for both configurable and simple products.

I’ve found this code here: Update product sku with customs options skus on product pages and cart

I’ve tried to apply it in an install version 1.9.2.2 and cannot make it retrieve the option SKU text in certain situations (if the select is not a drop down, but instead a radio choice or checkbox).

The current code in use at the end of the file: /app/design/frontend/{template}/default/template/catalog/product/view/options.phtml:

    </script>
    <!-- begin custom code -->
    <dl>
    <?php $options_to_sku = array();?>
    <?php foreach($_options as $_option): ?>
    <?php echo $this->getOptionHtml($_option) ?>
    <?php if ($_option->getType() == 'drop_down') {
    $options_to_sku["{$_option->getId()}"] = array();
    foreach ($_option->getValues() as $k => $v) 
    {
    $options_to_sku["{$_option->getId()}"]["{$v->getData('option_type_id')}"] = $v->getData('sku');
    }
    }?>
    <?php endforeach; ?>
    </dl>
    <script type="text/javascript">
    $("sku-suffix-container").update("<strong>Configuration: <?php echo $this->getProduct()->getSku(); ?></strong>");
    var options_to_sku = <?php echo json_encode($options_to_sku);?>;

    $$('.product-custom-option').each(function(elm) {
    $(elm).observe('change', function() {
    var sku_suffix = '';
    $$('.product-custom-option').each(function(opt) {
    if ($(opt).value.length==0) // no value selected
    return;

    var opt_id = $(opt).readAttribute('id').replace('select_','');
    if (!!!options_to_sku[opt_id]) // no option values array found
    return;
    if (!!!options_to_sku[opt_id][$(opt).value]) // no sku found matching value id
    return;
    sku_suffix += '-' + options_to_sku[opt_id][$(opt).value]; // add to suffix
    });
    $("sku-suffix-container").update("<strong>Configuration: <?php echo $this->getProduct()->getSku(); ?></strong>" + (sku_suffix) + "TestText");
    console.log(sku_suffix);            
    });
    });
    </script>
    <!-- end custom code -->
    <!--<dl>
    <?php foreach($_options as $_option): ?>
    <?php echo $this->getOptionHtml($_option) ?>
    <?php endforeach; ?>
    </dl>-->
    <?php endif; ?>

I’m calling the SKU suffix into the product page using this, the page is app/design/frontend/{template}/default/template/catalog/product/view.phtml:

    <div class="sku-suffix-container" id="sku-suffix-container"></div>

I can confirm that the observe function is working correctly on the checkbox and radio options as onchange the TestText is appearing on the page. I’ve also tried using or and || to retrieve data if the type is radio without luck.

    $_option->getType() == 'radio' 

But could not get it to work, have also tried:

    Mage_Catalog_Model_Product_Option::OPTION_TYPE_RADIO

Have kind of hit a wall at this point, can someone please advise how to also apply this code to radio and checkboxes in addition to the select drop_down above?


EDIT:

I’m now using this code to retrieve all option SKU values into the array, the drop_down is updating the SKU still after adding this:

    if ($_option->getType() == 'drop_down' || $_option->getType() == 'checkbox' || $_option->getType() == 'radio')

I’ve confirmed that the values are in the array by using:

    <pre><?php print_r($options_to_sku); ?></pre>

The remaining challenge is how to observe/check that the radio or checkbox is actually checked to then append the SKU value.

Related Posts

  • Ajax load the category custom product collection on custom phtml? (1)
    I have a phtml file which displays all subcategory with its product.I want to load the products of particular category section using ajax when user select a radio button.Give me some solution. sample code customphtml file. <?php foreach ($categories as $category): ?> […]
  • Radio button value not fetching in product page (0)
    I am trying to pass a image path as value to radio button in the product page. The other field live textbox value is fetching corectly. What am i doing wrong? text.phtml: <div class="input-box"> <?php if ($_option->getType() ): ?> <input type="text" […]
  • Disable configurable product attribute value (radio button) if not available (0)
    Thanks in advance for any kind of help in this problem.| I have requirements where I need to display radio button instead of drop down for configurable products. To achieve this i changes the configurable.phtml file (in my custom module). here is the updated code; <?php $_product […]
  • Remove Radio Buttons on Step 1 of Magento Onepage Checkout (1)
    I'm looking remove the "Continue" button on step 1 of Magento Onepage Checkout. I've tried the code at Thinking Magento with no luck. Rather than a radio button, I'd like the option to be a button itself. Once clicked, the user is moved onto step 2 based on their selection. Here is […]
  • Contact form redirects to different page after submitting the form (1)
    I have contact us page which includes map, form, and some text. the page url is /contacts_page, but when i submit the form it goes to some different url i.e /contacts/index and this new redirect page shows thank you message and contact form. I want to make the url to redirect on same […]
  • create bundle product with dynamic bundle item with update (0)
    I want to create a custom module where i can add dynamic product to bundle item create an option based on subcategory and when a product is added to a particular sub category it should dynamically update the products in the bundle item of that particular subcategory option. I have […]
  • showing text on page (0)
    I am using this code to show a image of a product attribute "brand image" <?php $brand = $_product->getAttributeText('brand'); $brandImage = str_replace(' ', '_', $brand) . ".jpg"; $brandLink = strtolower(str_replace(' ', '-', $brand)) . ".html"; $brandBaseUrl = […]
  • showing text on page (0)
    I am using this code to show a image of a product attribute "brand image" <?php $brand = $_product->getAttributeText('brand'); $brandImage = str_replace(' ', '_', $brand) . ".jpg"; $brandLink = strtolower(str_replace(' ', '-', $brand)) . ".html"; $brandBaseUrl = […]
  • values are not saving after renaming attribute code (0)
    we are using the marketplace multivendor/seller site..... we gave an option for seller to update the product details in frontend. We have an attribute with following values : attribute code : "mp_local_shipping_charge" , attribute label "Local Shipping Charges" we changed to […]
  • dropdown attribute is not saving in database (1)
    we are using magento multi vendor site. In frontend we gave an option for vendor update product attributes we are using following code to update custom attribute "local" .its working fine. Catalog Input Type for Store Owner : Textfield phtml <?php $attribute = […]
Magento Admin - Catalog Product New - Delete Select Values
Custom select on product doesnt grey option if not available e.g. Size: L not available in “Black”

1 Comment on this article

  • User October 26, 2016

    Success, after some trial and error, the following code will work for drop_down, radio and checkboxes and load the options SKU.

    EDIT: Going forward the only thing this is missing is that the sku values are not reloaded when clicking the edit item link from the main cart page. The script will fire on the first change made in the options by the user but I haven’t figured out how to fire it on page load so the sku with options shows.

    If someone can advise how this would be done with an example it would be much appreciated.

        </script>
    
    
        <!-- begin custom code -->
        <dl>
        <?php $options_to_sku = array();?>
    
        <?php foreach($_options as $_option): ?>
        <?php echo $this->getOptionHtml($_option) ?>
        <?php
        if ($_option->getType() == 'drop_down' || $_option->getType() == 'checkbox' || $_option->getType() == 'radio')
        {
        $options_to_sku["{$_option->getId()}"] = array();
        foreach ($_option->getValues() as $k => $v) 
        {
        $options_to_sku["{$_option->getId()}"]["{$v->getData('option_type_id')}"] = $v->getData('sku');
        }
        }
        ?>
        <?php endforeach; ?>
        </dl>
        <script type="text/javascript">
        $("sku-suffix-container").update("<strong>Configuration: <?php echo $this->getProduct()->getSku(); ?></strong>");
        var options_to_sku = <?php echo json_encode($options_to_sku);?>;
    
        $$('.product-custom-option').each(function(elm) {
        $(elm).observe('change', function() {
        var sku_suffix = '';
        $$('.product-custom-option').each(function(opt) {
        if ($(opt).value.length==0 || $(opt).checked==false) // no value selected
        return;
        var build_opt_id = $(opt).readAttribute('id').replace('select_','').replace('options_','');
    
        var opt_id = build_opt_id.replace(/_.*/,'');
    
        if (!!!options_to_sku[opt_id]) // no option values array found
        return;
    
        if (!!!options_to_sku[opt_id][$(opt).value]) // no sku found matching value id
        return;
    
        sku_suffix += '-' + options_to_sku[opt_id][$(opt).value] // add to suffix
        });
        $("sku-suffix-container").update("<strong>Configuration: <?php echo $this->getProduct()->getSku(); ?></strong>" + (sku_suffix) + "TestText");
    
        console.log(sku_suffix);
    
        });
    
        });
    
        </script>
        <!-- end custom code -->
    
        <!--<dl>
        <?php foreach($_options as $_option): ?>
        <?php echo $this->getOptionHtml($_option) ?>
        <?php endforeach; ?>
        </dl>-->
        <?php endif; ?>
    

    Reply

Add a comment