Product Overview : Sell

<div class="product-overview__sell"

     x-data="initStickySellProductMobile()"

     @resize.window="isMobile = window.outerWidth < 768"

     @scroll.window="scroll()"

>

    <?php /* In overview */ ?>

    <div x-ref="content">

        <a href="#" class="btn btn-secondary btn-full-width justify-between rounded-bl-none rounded-br-none bg-white">

            <span>Simuler mon financement</span>

            <?= icon('chevron-right', 'w-2'); ?>

        </a>

        <div class="flex mt-2.5 md:mt-2 gap-2.5 md:gap-2">

            <div class="w-1/2">

                <a href="#" class="btn btn-primary btn-full-width rounded-none rounded-bl-button">Essayer</a>

            </div>

            <div class="w-1/2">

                <a href="#" class="btn btn-primary btn-full-width rounded-none rounded-br-button">Réserver</a>

            </div>

        </div>

    </div>

    <div class="text-text-light font-medium tracking-tightened mt-10">

        <div class="flex gap-3.75 items-baseline">

            <?= icon('label-check-colored', 'w-3.75 text-primary-accent'); ?>

            <div class="flex flex-col">

                <span>100% satisfait ou remboursé</span>

                <span class="text-text-light text-sm">Pendant 30 jours ou 1000km</span>

            </div>

        </div>

    </div>

    <?php /* floating bar */ ?>

    <div class="fixed bottom-0 left-0 right-0 bg-white px-5 py-3.75 z-40" x-show="isSticky"

         x-transition:enter="transition ease-out duration-300"

         x-transition:enter-start="opacity-0"

         x-transition:enter-end="opacity-100"

         x-transition:leave="transition ease-in duration-300"

         x-transition:leave-start="opacity-100"

         x-transition:leave-end="opacity-0"

    >

        <a href="#" class="btn btn-secondary btn-full-width justify-between rounded-bl-none rounded-br-none bg-white">

            <span>Simuler mon financement</span>

            <?= icon('chevron-right', 'w-2'); ?>

        </a>

        <div class="flex mt-2.5 md:mt-2 gap-2.5 md:gap-2">

            <div class="w-1/2">

                <a href="#" class="btn btn-primary btn-full-width rounded-none rounded-bl-button">Essayer</a>

            </div>

            <div class="w-1/2">

                <a href="#" class="btn btn-primary btn-full-width rounded-none rounded-br-button">Réserver</a>

            </div>

        </div>

    </div>

</div>



<script>

  function initStickySellProductMobile() {

    return {

      isMobile: window.outerWidth < 768,

      isSticky: false,

      init() {

        this.isSticky = this.$refs.content.getBoundingClientRect().top + this.$refs.content.offsetHeight <= 0;

      },

      scroll() {

        if(this.isMobile) {

          this.isSticky = this.$refs.content.getBoundingClientRect().top + this.$refs.content.offsetHeight <= 0;

        }

      }

    }

  }

</script>