Bagisto Forum

    Bagisto

    • Register
    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups

    How to set 'Buy now' button along with Add to card button?

    Knowledge Base
    5
    26
    5477
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • Z
      Zakir last edited by

      yes in velocity theme version 1.2 .

      1 Reply Last reply Reply Quote 0
      • Z
        Zakir last edited by

        or
        how to open 'checkout/cart' page in a model popup window once click on 'Add To cart' ?

        1 Reply Last reply Reply Quote 0
        • admin
          admin last edited by

          @Zakir
          you may use is_buy_now field in velocity which is already implemented for default theme here https://github.com/bagisto/bagisto/blob/master/packages/Webkul/Shop/src/Resources/views/products/view.blade.php#L134

          Thanks

          1 Reply Last reply Reply Quote 0
          • Z
            Zakir last edited by

            Great Thanks.
            Can you please write me more details how to active that field , I can see its hidden field.

            1 Reply Last reply Reply Quote 0
            • Z
              Zakir last edited by

              @admin how to implement that in velocity ? is there configuration in Admin page or where to add that?

              1 Reply Last reply Reply Quote 0
              • D
                deepak227 last edited by

                @Zakir please go through the files packages\Webkul\Velocity\src\Resources\assets\js\UI\components\cart-list.vue and packages\Webkul\Velocity\src\Resources\assets\js\UI\components\modal.vue

                These files will definitely work for you for pop up view.
                Thank you

                1 Reply Last reply Reply Quote 0
                • P
                  parasbhadauria63 @admin last edited by

                  Hi @admin
                  I want to add a Buy Now button along with Add to Cart button for Velocity Theme.
                  Please help me out with how can I implement it.
                  Thanks

                  1 Reply Last reply Reply Quote 0
                  • V
                    Vaishali Agarwal last edited by

                    @parasbhadauria63
                    Buy now enable/disable has been implemented for both themes in master branch.
                    you can check the updates here https://github.com/bagisto/bagisto/issues/4321

                    P 1 Reply Last reply Reply Quote 0
                    • P
                      parasbhadauria63 @Vaishali Agarwal last edited by

                      Hi @Vaishali-Agarwal
                      Currently only add to cart button is active.
                      If buy now is implemented then can you tell me then how can I enable it for the velocity theme?
                      Thanks

                      1 Reply Last reply Reply Quote 0
                      • V
                        Vaishali Agarwal last edited by

                        @parasbhadauria63
                        May I know which bagisto version you are currently using?

                        P 1 Reply Last reply Reply Quote 1
                        • P
                          parasbhadauria63 @Vaishali Agarwal last edited by parasbhadauria63

                          @Vaishali-Agarwal
                          It is "v1.1.2"

                          1 Reply Last reply Reply Quote 0
                          • V
                            Vaishali Agarwal last edited by

                            @parasbhadauria63
                            I recommend you to upgrade your project with latest release v1.2.0.

                            Still you can implement buy now feature on your existing project as well, you just need to update all the changes as mention here https://github.com/bagisto/bagisto/commit/963191b3fc66188f630d0aa34f945b63efcfd48c

                            P 1 Reply Last reply Reply Quote 0
                            • P
                              parasbhadauria63 @Vaishali Agarwal last edited by

                              @Vaishali-Agarwal
                              Ok, How can I upgrade from 1.1.2 to 1.2.0 (latest version).
                              Can I upgrade it in one-click as mentioned in https://bagisto.com/en/how-to-update-bagisto-with-one-click/

                              1 Reply Last reply Reply Quote 0
                              • V
                                Vaishali Agarwal last edited by

                                @parasbhadauria63
                                please check this guide if you want to upgrade to latest version https://devdocs.bagisto.com/1.x/introduction/upgrade_to_latest_bagisto.html

                                you can't update this with one click update as you have an older version exist in which this feature is not available.

                                P 1 Reply Last reply Reply Quote 0
                                • P
                                  parasbhadauria63 @Vaishali Agarwal last edited by

                                  @Vaishali-Agarwal
                                  The latest version 1.2.0 is installed
                                  But still, I did not get the option to enable the Buy Now Button

                                  1 Reply Last reply Reply Quote 0
                                  • V
                                    Vaishali Agarwal last edited by

                                    @parasbhadauria63
                                    If you have successfully installed the latest version then to take the buy now updates you need to done the changes in the files as mention in below link
                                    https://github.com/bagisto/bagisto/commit/963191b3fc66188f630d0aa34f945b63efcfd48c

                                    P 1 Reply Last reply Reply Quote 0
                                    • P
                                      parasbhadauria63 @Vaishali Agarwal last edited by parasbhadauria63

                                      Hi @Vaishali-Agarwal
                                      I have made the changes as mentioned by you
                                      I have got the option from the backend as you can see in the screenshot.
                                      Buy Now Screenshot.png

                                      Buy Now button becomes visible only in the bliss theme.
                                      How to make it visible in the Velocity theme also???
                                      I am sharing some part of the product page source code below:

                                      <script type='text/javascript' src='https://unpkg.com/spritespin@4.1.0/release/spritespin.js'></script>
                                      
                                      <script type="text/x-template" id="product-view-template">
                                          <form
                                              method="POST"
                                              id="product-form"
                                              @click="onSubmit($event)"
                                              action="http://localhost/bagisto-new/public/checkout/cart/add/1">
                                      
                                              <input type="hidden" name="is_buy_now" v-model="is_buy_now">
                                      
                                              <slot v-if="slot"></slot>
                                      
                                              <div v-else>
                                                  <div class="spritespin"></div>
                                              </div>
                                      
                                          </form>
                                      </script>
                                      
                                      <script>
                                          Vue.component('product-view', {
                                              inject: ['$validator'],
                                              template: '#product-view-template',
                                              data: function () {
                                                  return {
                                                      slot: true,
                                                      is_buy_now: 0,
                                                  }
                                              },
                                      
                                              mounted: function () {
                                                  let currentProductId = 'wall-painting';
                                                  let existingViewed = window.localStorage.getItem('recentlyViewed');
                                      
                                                  if (! existingViewed) {
                                                      existingViewed = [];
                                                  } else {
                                                      existingViewed = JSON.parse(existingViewed);
                                                  }
                                      
                                                  if (existingViewed.indexOf(currentProductId) == -1) {
                                                      existingViewed.push(currentProductId);
                                      
                                                      if (existingViewed.length > 3)
                                                          existingViewed = existingViewed.slice(Math.max(existingViewed.length - 4, 1));
                                      
                                                      window.localStorage.setItem('recentlyViewed', JSON.stringify(existingViewed));
                                                  } else {
                                                      var uniqueNames = [];
                                      
                                                      $.each(existingViewed, function(i, el){
                                                          if ($.inArray(el, uniqueNames) === -1) uniqueNames.push(el);
                                                      });
                                      
                                                      uniqueNames.push(currentProductId);
                                      
                                                      uniqueNames.splice(uniqueNames.indexOf(currentProductId), 1);
                                      
                                                      window.localStorage.setItem('recentlyViewed', JSON.stringify(uniqueNames));
                                                  }
                                              },
                                      
                                              methods: {
                                                  onSubmit: function(event) {
                                                      if (event.target.getAttribute('type') != 'submit')
                                                          return;
                                      
                                                      event.preventDefault();
                                      
                                                      this.$validator.validateAll().then(result => {
                                                          if (result) {
                                                              this.is_buy_now = event.target.classList.contains('buynow') ? 1 : 0;
                                      
                                                              setTimeout(function() {
                                                                  document.getElementById('product-form').submit();
                                                              }, 0);
                                                          }
                                                      });
                                                  },
                                              }
                                          });
                                      
                                          window.onload = function() {
                                              var thumbList = document.getElementsByClassName('thumb-list')[0];
                                              var thumbFrame = document.getElementsByClassName('thumb-frame');
                                              var productHeroImage = document.getElementsByClassName('product-hero-image')[0];
                                      
                                              if (thumbList && productHeroImage) {
                                                  for (let i=0; i < thumbFrame.length ; i++) {
                                                      thumbFrame[i].style.height = (productHeroImage.offsetHeight/4) + "px";
                                                      thumbFrame[i].style.width = (productHeroImage.offsetHeight/4)+ "px";
                                                  }
                                      
                                                  if (screen.width > 720) {
                                                      thumbList.style.width = (productHeroImage.offsetHeight/4) + "px";
                                                      thumbList.style.minWidth = (productHeroImage.offsetHeight/4) + "px";
                                                      thumbList.style.height = productHeroImage.offsetHeight + "px";
                                                  }
                                              }
                                      
                                              window.onresize = function() {
                                                  if (thumbList && productHeroImage) {
                                      
                                                      for(let i=0; i < thumbFrame.length; i++) {
                                                          thumbFrame[i].style.height = (productHeroImage.offsetHeight/4) + "px";
                                                          thumbFrame[i].style.width = (productHeroImage.offsetHeight/4)+ "px";
                                                      }
                                      
                                                      if (screen.width > 720) {
                                                          thumbList.style.width = (productHeroImage.offsetHeight/4) + "px";
                                                          thumbList.style.minWidth = (productHeroImage.offsetHeight/4) + "px";
                                                          thumbList.style.height = productHeroImage.offsetHeight + "px";
                                                      }
                                                  }
                                              }
                                          };
                                      </script>
                                      
                                      1 Reply Last reply Reply Quote 0
                                      • V
                                        Vaishali Agarwal last edited by

                                        @parasbhadauria63
                                        please check once have you added the changes in velocity package as mention in the PR
                                        check these files & changes must be added into your project as well https://prnt.sc/x3wumb

                                        P 1 Reply Last reply Reply Quote 0
                                        • P
                                          parasbhadauria63 @Vaishali Agarwal last edited by

                                          Hi @Vaishali-Agarwal
                                          I have already made the changes as mentioned above.
                                          But still Buy Now is not visible in the Velocity theme.
                                          Please help me out.
                                          Thanks

                                          1 Reply Last reply Reply Quote 0
                                          • V
                                            Vaishali Agarwal last edited by Vaishali Agarwal

                                            Hi @parasbhadauria63
                                            you need to run the publish all your asset.
                                            first go to the velocity package & run command

                                            npm i
                                            
                                            npm run watch-poll
                                            

                                            once these command run successfully
                                            open the project root directory & run the below command
                                            php artisan vendor:publish --force & press 0 to continue

                                            P 1 Reply Last reply Reply Quote 0
                                            • First post
                                              Last post