Adding Product Video on PDP

Untuk menambahkan Video Youtube pada halaman produk, Anda harus mendapatkan API key dari akun Youtube tersebut. Langkah untuk mendapatkan API key Youtube:

  1. Masuk pada halaman Google Developers Console , login akun Anda

  2. Pada menu bagian Dashboard pilih Create Project

Image Placeholder

Gambar 1: Tampilan pada halaman Create Project

  1. Setelah membuat projek baru, pilih menu Dashboard lalu klik Enable APIS and Services

Image Placeholder

Gambar 2: Tampilan menu API

  1. Scrolldown, setelah itu pada bagian Youtube pilih Youtube Data API v3 > Enable

Image Placeholder
Image Placeholder

Gambar 3: Tampilan pada halaman Library bagian Youtube

  1. Pada menu Overview klik Create Credential

Image Placeholder

Gambar 4: Tampilan pada halaman Overview

  1. Langkah selanjutnya isi pilihan sesuai intruksi gambar dibawah ini


Gambar 5: Tampilan konfigurasi credential

  • “Which API are you using ?” > Youtube Data API v3

  • “Where will you be calling the API from?” > Web server (e.g. node.js, Tomcat)

  • “What data will you be accessing ?” > Public data


  1. Salin API key Youtube Anda. API key ini akan digunakan untuk konfigurasi Youtube anda untuk menambahkan video produk.


Gambar 6: Tampilan konfigurasi Credential


Konfigurasi Youtube API key

Backoffice > Stores > Configuration > Catalog > Catalog

  1. Pada menu Catalog pilih Product Video

  2. Pada bagian Youtube API key masukan API key yang sudah Anda dapatkan > Save Config


Gambar 7: Tampilan Konfigurasi Product Video



Menambahkan Video di PDP Preview

Backoffice > Catalog > Products

  1. Buka Produk dalam mode edit atau Add Product untuk membuat produk yang baru

  2. Pada bagian Images And Videos klik Add video


Gambar 8: Tampilan tombol penambahan video


Gambar 9: Tampilan Form Add Video

  • Url : isi dengan url video Anda yang telah diunggah di Youtube.

  • Title : judul untuk video tersebut. Secara default akan mengikuti dari judul video yang Anda unggah di Youtube.

  1. Klik Save



Tampilan Frontend PDP versi Magento

   

Gambar 10: Tampilan hasil menambahkan video pada halaman PDP bagian Preview

Tampilan Frontend PDP versi PWA


Gambar 11: Tampilan hasil menambahkan video pada halaman PDP bagian Preview


Menambahkan Video di PDP bagian Deskripsi Produk

  1. Buka Produk dalam mode edit atau Add Product untuk membuat produk yang baru

  2. Pada bagian Deskription klik Show/Hide Editor , tambahkan kode saat Anda melakukan Embed Video Youtube Anda


Gambar 12: Tampilan pada halaman produk dalam mode edit bagian Description

Cara Embed Video Youtube:

  • Buka Video Youtube Anda

  • Klik Share dibagian bawah video , maka akan muncul pop up yang menunjukan kode tersebut, salin kode tersebut

Gambar 13: Tampilan pada halaman Youtube

  1. Klik Save


Gambar 14: Tampilan hasil menambahkan video pada halaman PDP bagian Details