3

In my custom Module I am able to disable array of days using this code in viewproduct.phtml

<script>
require(["jquery", "mage/calendar"], function($){
$(document).ready(function(){
var unavailableDates = ["12-01-2019","19-01-2019","29-01-2019"];
    function unavailable(date) 
{
var string = $.datepicker.formatDate('dd-mm-yy',date);
return [unavailableDates.indexOf(string) == -1];
}

$("#options_4_date").calendar({beforeShowDay: unavailable});

});
});

</script> 

However I added same code in my Theme Magento_Catalog/templates/product/view.phtml to work with product options choosing date is not working. enter image description here

Any Idea or I am not doing it correct.

Here is my theme view.phtml

<?php
/**
 * Copyright © 2015 Magento. All rights reserved.
 * See COPYING.txt for license details.
 */

// @codingStandardsIgnoreFile
?>

<?php
    $_config = $this->helper('Magetheme\Custom\Helper\Data');
?>

<div class="row">
    <div class="col-lg-6 col-md-6 image-box-detail">
        <?php echo $block->getChildHtml('product.info.media'); ?>
    </div>

    <div class="col-lg-6 col-md-6 info-box-detail">
        <?php echo $block->getChildHtml('product.info.main'); ?>
        <div class="social-detail">
            <!-- Go to www.addthis.com/dashboard to customize your tools -->
            <script type="text/javascript" src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-548a6c0340f6f753" async="async"></script>
            <!-- Go to www.addthis.com/dashboard to customize your tools -->
            <div class="share-title"><?php echo __('Share')?></div><div class="addthis_sharing_toolbox"></div>
        </div>
    </div>

    <div class="col-lg-12 col-md-12 detail-bottom-wrapper">
        <?php echo $block->getChildHtml('detail.bottom'); ?>
    </div>

    <?php
        $related = $block->getChildHtml('related.product');
        $upsell = $block->getChildHtml('upsell.product');
        //var_dump($upsell);
    ?>


    <?php if($_config->getProductDetail('show_related') || $_config->getProductDetail('show_upsell')){?>                
    <div class="col-lg-12 col-md-12 box-related-upsell">
        <?php if($_config->getProductDetail('show_related')){?>
            <div class="block product-details box-related">
                <div class="block-title">
                    <strong><?php echo __('Related Products')?></strong>
                </div>
                <?php echo $block->getChildHtml('related.product'); ?>
            </div>
        <?php }?>
        <?php if($_config->getProductDetail('show_upsell')){?>
            <div class="block product-details box-up-sell">
                <div class="block-title">
                    <strong><?php echo __('Upsell Products')?></strong>
                </div>
                <?php echo $block->getChildHtml('upsell.product'); ?>
            </div>
        <?php }?>

    </div>
    <?php } ?>  
</div>
<script>
require(["jquery", "mage/calendar"], function($){
$(document).ready(function(){
var unavailableDates = ["12-01-2019","19-01-2019","29-01-2019"];
    function unavailable(date) 
{
var string = $.datepicker.formatDate('dd-mm-yy',date);
return [unavailableDates.indexOf(string) == -1];
}

$("#options_4_date").calendar({beforeShowDay: unavailable});

});
});

</script> 
  • What error is in the console? – Evgeniy Kapelko Sep 23 '18 at 20:20
  • There no error in the console – ShapCyber Sep 24 '18 at 6:37
1

Ok, I am not sure I am understanding exactly what you are trying to do to be honest..

However, in terms of javascript integration with Magento 2, I think the below may help:

in your phtml, I'd expect options_4_date to be a html element. And in Magento 2, we need the script to be using the json type declaration I put below. the notation "Mbs_TryACalendarInput/js/calendar" means the javascript file location is in a view/frontend/web directory of a module but you can also use a theme location.

<div id="options_4_date">
    this is a calendar placeholder
</div>

<script type="text/x-magento-init">
    {
      "#options_4_date": {
        "Mbs_TryACalendarInput/js/calendar": {

        }
      }
    }
</script>

Finally, the below is the translation of your snippet. Unfortunately, I have not tested end to end my script but that should be close to where you want to go

define([
    'jquery',
    'mage/calendar'
], function ($) {
    'use strict';

    var unavailableDates = ["03-09-2018","09-09-2018","11-09-2018"];
    function unavailable(date) {
       var string = $.datepicker.formatDate('dd-mm-yy',date);
       return [unavailableDates.indexOf(string) == -1];
    }

    return function (config, element) {
       $(element).calendar({beforeShowDay: unavailable});
    }
});

enter image description here

| improve this answer | |
  • I have tried it replace jQuery by $ same still not working. – ShapCyber Sep 23 '18 at 19:57
  • can you update the post with your phtml code, I am looking at it now – Herve Tribouilloy Sep 23 '18 at 20:20
  • post updated, I have added the theme view.phtml – ShapCyber Sep 24 '18 at 6:56
  • ok, it does work for me now. good luck – Herve Tribouilloy Sep 24 '18 at 19:46
  • How do you get it to work i have tried your code is not working. – ShapCyber Sep 24 '18 at 20:07
0

Here is my solution

Product Attributes

Customizable Options -> Custom options let customers choose the product variations they want.

Instead of selecting Option Type As Date I selected Field.

In the browser I figure out that the Field Name is "options[4]"

Then in my Theme view.phtml I added below code.

<script>
require(["jquery", "mage/calendar"], function($){
$(document).ready(function(){
var unavailableDates = ["12-09-2018","19-09-2018","29-09-2018"];
    function unavailable(date) 
{
var string = $.datepicker.formatDate('dd-mm-yy',date);
return [unavailableDates.indexOf(string) == -1];
}

$("input[name='options[4]']").calendar({beforeShowDay: unavailable});

});
});

</script>  

Wao! it work like charm.

My plugin work on both custom and main store order.

Thank you @Herve Tribouilloy for your response, but your idea didn't cut it.

| improve this answer | |
  • np, some days are good, some are not as good, anyway, I have put down a public repository with a self contained plugin that uses my code. Please do comment if it cuts it or not, thanks. see repo at bitbucket.org/magstaging/calendar – Herve Tribouilloy Nov 17 '18 at 15:27

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.