Overtry · ინსტრუქცია
ინსტრუქცია
Overtry პროდუქტის გვერდზე „სცადე“ ღილაკს ამატებს. მყიდველი იღებს ოთახის ან საკუთარ ფოტოს და ხედავს, როგორ გამოიყურება თქვენი პროდუქტი. აქ ყველაფერია: გასაღების აღებიდან WordPress-სა და Shopify-მდე.
1. აიღეთ საიტის გასაღები
შედით
შედით lamp.ar/login-ზე და შექმენით კომპანია. ყველა კომპანიას თვეში 20 უფასო სურათი აქვს; მეტისთვის მოგვწერეთ hello@lamp.ar-ზე.
დაამატეთ მაღაზია
დაფაზე, Overtry-ის განყოფილებაში, აირჩიეთ „Add shop“. ჩაწერეთ მაღაზიის მისამართი (მაგალითად shop.ge; www-იანი ვერსია თავისით დაემატება). თუ პროდუქტის ფოტოები სხვა მისამართიდან მოდის, მაგალითად სურათების CDN-იდან, ჩაწერეთ ის „Product images from“ ველში. თუ არა, მაღაზიის მისამართი გამოიყენება.
დააკოპირეთ კოდი
მაღაზია იღებს გასაღებს (pk_try_…) და ჩასასმელ კოდს. მისამართების დამატება მოგვიანებითაც შეიძლება, მაგალითად სატესტო საიტის: ღილაკი მხოლოდ ჩამოთვლილ მისამართებზე მუშაობს.
2. ჩასვით ღილაკი
სკრიპტი გვერდზე ერთხელ ჩასვით, ღილაკი კი იქ, სადაც უნდა გამოჩნდეს, ჩვეულებრივ „კალათაში დამატების“ გვერდით.
<script type="module" src="https://lamp.ar/overtry.js"></script>
<overtry-button
api-key="pk_try_…"
category="furniture"
product-image="https://shop.example/images/sofa.jpg"
product-name="Sofa Milano"
dimensions="220 x 90 x 85 cm"></overtry-button>product-image თუ არ მიუთითეთ, ღილაკი გვერდის og:image-ს იღებს. მაღაზიების თემების უმეტესობაში ეს უკვე პროდუქტის ფოტოა.
3. ღილაკის პარამეტრები
სავალდებულოა მხოლოდ api-key. დანარჩენი შედეგს აუმჯობესებს ან ღილაკის ქცევას ცვლის.
api-key- მაღაზიის გასაღები დაფიდან (pk_try_…). სავალდებულოა.
category- რა პროდუქტია. აქედან გამომდინარეობს, როგორ იმუშავებს მორგება: იხილეთ კატეგორიები ქვემოთ. ნაგულისხმევი: furniture.
product-image- პროდუქტის ფოტო (https). უნდა მოდიოდეს მაღაზიის მისამართიდან ან „Product images from“-ში ჩაწერილი მისამართიდან. ნაგულისხმევი: გვერდის og:image.
product-name- პროდუქტის სახელი. ჩანს მორგების ფანჯარაში და შედეგსაც აუმჯობესებს.
dimensions- რეალური ზომა, მაგალითად „220 x 90 x 85 cm“. ოთახში პროდუქტი სწორი ზომით ჩანს.
variants- ერთი პროდუქტის ფერები ან სტილები სიის სახით: name, image და, ფერის ნიშნისთვის, color. მყიდველი მათ შორის შედეგის ქვემოთ გადართავს.
variants-preload- ყველა ვარიანტს პირველისთანავე ამზადებს, რომ მყიდველმა ფერი ლოდინის გარეშე გადართოს. ნაგულისხმევად გამორთულია: მზადდება მხოლოდ ის ფერები, რომლებსაც მყიდველი გახსნის.
mode="exact"- კედლები და იატაკი: AI სურათის ნაცვლად თქვენს ზუსტ ნიმუშს ხატავს მყიდველის კედელზე ან იატაკზე. მყიდველს კუთხეების გადაადგილება და ნიმუშის ზომის შეცვლა შეუძლია.
texture- კედლები და იატაკი ზუსტ რეჟიმში: ცალკე ნიმუშის სურათი, თუ product-image ინტერიერს აჩვენებს და არა მასალას.
texture-width-cm- რამდენ სანტიმეტრს ფარავს ნიმუშის სურათი სინამდვილეში, რომ ნახატი სწორი ზომის იყოს. ნაგულისხმევი: შპალერი 53, კედლის ფილა 30, იატაკი 120, იატაკის ფილა 60.
color- საღებავი: ფერი, მაგალითად „#d8cfc4“. მხოლოდ ფერით მითითებული საღებავი ზუსტ რეჟიმს იყენებს.
choices="off"- ოთახის პროდუქტები: აღარ ეკითხება მყიდველს, როგორ (კედელთან, გვერდულად, კუთხეში) და სად დადგეს პროდუქტი.
lang- ka, en, es ან fr. ნაგულისხმევი: გვერდის ენა (/ka/ მისამართში ან <html lang>), თორემ ინგლისური.
label- ღილაკის წარწერა „სცადე“-ს ნაცვლად.
qr="off"- კომპიუტერზე ფანჯარა QR კოდს სთავაზობს, რომ მყიდველმა ტელეფონზე გააგრძელოს. ეს პარამეტრი მას თიშავს.
qr-url- სად მიდის QR კოდი. ნაგულისხმევი: იგივე პროდუქტის გვერდი.
id- თუ ერთ გვერდზე რამდენიმე ღილაკია, QR კოდს ამ ღილაკს უკავშირებს.
<overtry-button api-key="pk_try_…" category="apparel"
product-image="https://shop.example/images/zip-red.jpg"
variants='[
{"name": "Red", "image": "https://shop.example/images/zip-red.jpg", "color": "#7b1e2b"},
{"name": "Navy", "image": "https://shop.example/images/zip-navy.jpg", "color": "#1f2a44"}
]'></overtry-button>ღილაკს მაღაზიის სტილს თქვენი CSS-იდან მისცემთ: overtry-button::part(button).
overtry-button::part(button) { background: #111; color: #fff; border-radius: 0; }4. კატეგორიები
category-ში ჩაწერეთ ერთ-ერთი ეს მნიშვნელობა. თითოეული ჯგუფი თავისებურად მუშაობს.
ოთახში
furniture, decor, lighting, appliance, electronics
მყიდველი ოთახს იღებს, შემდეგ ფოტოზე სანიმუშო სკამს გადააადგილებს და აბრუნებს იქ, სადაც პროდუქტი უნდა იდგეს. პროდუქტი იქ ჩნდება, dimensions-ით მითითებული ზომით.
კედლები და იატაკი
wallpaper, paint, wall_tile, flooring, floor_tile
მყიდველი კედელს ან იატაკს იღებს და მასზე თქვენი პროდუქტი ჩნდება. mode="exact"-ით ნიმუში ზუსტად იხატება და მყიდველს ყველა ფერის ცდა ერთსა და იმავე ფოტოზე შეუძლია.
ადამიანზე
apparel, shoes, bag, hat, jewelry, eyewear, watch
მყიდველი საკუთარ ფოტოს იღებს და პროდუქტს თავის თავზე ხედავს. გვერდზე ნაჩვენები ფერი მაშინვე იწყება, სხვა ფერი კი მზადდება, როცა მყიდველი მას გახსნის (variants-preload-ით ყველა ერთად).
5. პროდუქტის ფოტოები
კედლები და იატაკი
ბრტყელი ნიმუში, პირდაპირ გადაღებული და მასალამდე მოჭრილი: თეთრი არშიის, ჩარჩოს ან ინტერიერის გარეშე, რადგან სურათში ყველაფერი მეორდება. სიგანე მინიმუმ 800 პიქსელი. texture-width-cm-ში ჩაწერეთ, რა რეალურ სიგანეს აჩვენებს სურათი.
ტანსაცმელი და აქსესუარები
მხოლოდ პროდუქტი, წინიდან, ერთფეროვან ფონზე. მოდელზე გადაღებული ფოტოც მუშაობს, მაგრამ ცალკე პროდუქტი ყველაზე ზუსტ შედეგს იძლევა.
ოთახის პროდუქტები
მთლიანი პროდუქტი ერთფეროვან ფონზე, მოუჭრელად. დაამატეთ dimensions, რომ სწორი ზომით გამოჩნდეს.
ყველა ფოტო
JPEG, PNG ან WebP, 10 MB-მდე, https-ით, მაღაზიის მისამართიდან ან „Product images from“-ში ჩაწერილი მისამართიდან.
6. რა ითვლება სურათად
- სურათი არის ერთი მზა შედეგი, რომელსაც მყიდველი ხედავს: ერთი მორგების ერთი ფერი.
- მყიდველის მიერ გახსნილი თითო ფერი ერთი სურათია. variants-preload-ით ყველა ფერი ერთად მზადდება: 5-ფერიანი პროდუქტის მორგება მაშინ 5 სურათია.
- კედლები და იატაკი ზუსტ რეჟიმში: ერთი ფოტო ერთი სურათია, რამდენი ფერიც არ უნდა სცადოს მყიდველმა.
- წარუმატებელი მცდელობა არ ითვლება.
- ლიმიტი თვიურია და ყოველი თვის 1-ში (UTC) განახლდება. საათობრივი ზღვარი (თვიური მოცულობის 2%, მინიმუმ 20 საათში) გასაღების ბოროტად გამოყენებისას ლიმიტს ერთბაშად დახარჯვისგან იცავს.
WordPress და WooCommerce
ჩასვით ეს შვილობილი თემის functions.php-ში ან კოდის ფრაგმენტების პლაგინში. სკრიპტი პროდუქტის გვერდებზე ჩაიტვირთება, ღილაკი კი „კალათაში დამატებამდე“ გამოჩნდება, პროდუქტის საკუთარი ფოტოთი და სახელით.
<?php
// Overtry on WooCommerce product pages
add_action('wp_head', function () {
if (is_product()) echo '<script type="module" src="https://lamp.ar/overtry.js"></script>';
});
add_action('woocommerce_single_product_summary', function () {
global $product;
$category = has_term('wallpaper', 'product_cat', $product->get_id()) ? 'wallpaper' : 'furniture';
printf(
'<overtry-button api-key="%s" category="%s" product-image="%s" product-name="%s"></overtry-button>',
'pk_try_…',
$category,
esc_url(wp_get_attachment_image_url($product->get_image_id(), 'large')),
esc_attr($product->get_name())
);
}, 25); // before "Add to cart" (30)ერთი გვერდისთვის საკმარისია Custom HTML ბლოკი ჩასასმელი კოდით. მედიაბიბლიოთეკის ფოტოები მაღაზიის მისამართიდან მოდის, რომელიც უკვე დაშვებულია; სურათების CDN-ის შემთხვევაში მისი მისამართი დაფაზე დაამატეთ.
Shopify
Online Store → Themes → Customize-ში გახსენით პროდუქტის შაბლონი, დაამატეთ „Custom Liquid“ ბლოკი იქ, სადაც ღილაკი გინდათ (მაგალითად ყიდვის ღილაკების ქვემოთ), და ჩასვით ეს.
<script type="module" src="https://lamp.ar/overtry.js"></script>
<overtry-button
api-key="pk_try_…"
category="apparel"
product-image="https:{{ product.featured_image | image_url: width: 1600 }}"
product-name="{{ product.title | escape }}"></overtry-button>Shopify პროდუქტის ფოტოებს მაღაზიის მისამართიდან ან cdn.shopify.com-იდან აწვდის. თუ product_image_host_not_allowed გამოჩნდა, „Product images from“-ში cdn.shopify.com დაამატეთ. სხვადასხვა პროდუქტზე სხვადასხვა კატეგორიისთვის Liquid-ში product.type გამოიყენეთ.
დეველოპერებისთვის: მოვლენები
ღილაკი მოვლენებს აგზავნის, რომლებიც ანალიტიკაში შეგიძლიათ გადასცეთ: overtry:open, overtry:result, overtry:variant და overtry:error (detail.code-ში შეცდომის კოდია).
document.addEventListener("overtry:result", (e) => {
// e.detail.category: send it to your analytics
});
document.addEventListener("overtry:error", (e) => console.warn("Overtry", e.detail.code));ხშირი შეცდომები
როცა რამე ვერ გამოვა, მყიდველი მოკლე შეტყობინებას ხედავს, შეცდომის კოდი კი ბრაუზერის კონსოლში იწერება („[overtry] error: …“) და overtry:error მოვლენით იგზავნება. აი, რას ნიშნავს თითოეული.
origin_not_allowed- გვერდის მისამართი მაღაზიის სიაში არ არის. დაფაზე დაამატეთ: Overtry → თქვენი მაღაზია → Allowed addresses. https://shop.ge და https://test.shop.ge სხვადასხვა მისამართია.
product_image_host_not_allowed- პროდუქტის ფოტო დაუშვებელი მისამართიდან მოდის. დაამატეთ ეს მისამართი (მაგალითად cdn.shop.ge) „Product images from“-ში.
product_image_must_be_https- ფოტოს მისამართი http-ით იწყება. გამოიყენეთ მისი https მისამართი.
product_image_required- product-image მითითებული არ არის და გვერდს og:image არ აქვს. მიუთითეთ product-image.
quota- ამ თვის სურათები ამოიწურა. ღილაკი 1-ში ისევ ჩაირთვება; მეტისთვის ახლავე მოგვწერეთ hello@lamp.ar-ზე.
not_enabled- Overtry თქვენს კომპანიაზე ჩართული არ არის. მოგვწერეთ.
site_paused- მაღაზია დაფაზე შეჩერებულია. იქვე ჩართეთ.
invalid_key- გასაღები არასწორია ან შეიცვალა. დაფიდან თავიდან დააკოპირეთ.
rate_limited- მოკლე დროში ძალიან ბევრი მორგებაა. დაელოდეთ ერთ წუთს; თუ ხშირად ხდება, მოგვწერეთ.
unknown_category- category-ში ისეთი მნიშვნელობაა, რომელიც ზემოთ სიაში არ არის.
texture_unavailable- ზუსტმა რეჟიმმა ნიმუშის სურათი ვერ ჩატვირთა. შეამოწმეთ, რომ მისამართი სურათს ხსნის და ის 10 MB-ზე მეტი არ არის.
დახმარება გჭირდებათ?
გამოგვიგზავნეთ პროდუქტის გვერდის მისამართი და კოდი, რომელსაც ხედავთ, და შევამოწმებთ.
მოგვწერეთ