add. Closes #8

pages/books/[slug].vue

@@ -33,7 +33,7 @@
           </section>
         </section>
         <!--средний блок-->
-        <section class="flex flex-row items-center ml-12 gap-24">
+        <section class="flex flex-row items-center ml-12 gap-24 relative z-50">
           <!--левый-->
           <div class="flex flex-col items-center min-h-[310px]">
             <div class="flex flex-row">
@@ -41,7 +41,12 @@
               <img src="/img/svg/books/ruble.svg" alt="ruble" />
             </div>
             <div class="flex items-center flex-col gap-3">
-              <UiButton class="max-w-[440px] !font-normal !px-2 !py-4 mt-16">
+              <UiButton
+                @click="handleSelect"
+                :id="book.id"
+                variants="primary"
+                class="max-w-[440px] !font-normal !px-2 !py-4 mt-16"
+              >
                 {{ book.buttonText }}
               </UiButton>
               <UiParagraph size="200">
@@ -153,10 +158,11 @@
 
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
-import { useRoute } from '#app'
+import { useRoute, useRouter } from '#app'
 import UiHeading from '@/components/Typography/UiHeading.vue'
 import UiParagraph from '@/components/Typography/UiParagraph.vue'
 import UiButton from '@/components/UiButton/UiButton.vue'
+import { useSelectedBook } from '@/store/useSelectedBook'
 
 interface BookDetail {
   id: number
@@ -182,6 +188,8 @@ interface BookDetail {
 
 const route = useRoute()
 
+const router = useRouter()
+
 const currentBookData = ref<BookDetail | null>(null)
 
 const book = computed(() => currentBookData.value)
@@ -196,6 +204,10 @@ const loadBookData = async (slug: string) => {
   }
 }
 
+const handleSelect = () => {
+  router.push('/cart/')
+}
+
 watch(
   () => route.params.slug,
   async (newSlug) => {