Ubercart - implementacija brojača artikala u košarici

Submitted by victor.bourgade on Tue, 08/27/2019 - 21:07

Cart counter icon

Nakon implementacije programskog koda opisanog u ovom tutorialu dobiti ćete ikonu košarice sa prikazom broja artikala koji se u košarici nalaze. 

Prvi korak je kreiranje prilagođenog modula. Za ovaj korak možete proučiti Drupal dokumentaciju u kojoj je detaljno opisan proces kreiranja. 

Kreirati ćemo prilagođeni modul pod nazivom ubercart_custom. Za ovo nam je potrebna nova datoteka koju ćemo nazvati ubercart_custom i u koju ćemo postaviti 3 obavezna dokumenta:

  • ubercart_custom.info
  • ubercart_custom.install
  • ubercart_custom.module

U .info dokument postavljate sljedeći kod, kojega možete prilagoditi Vašim potrebama:

name = Ubercart custom
description = Alter ubercart module
core = 7.x
package = Ubercart

; Dependencies
dependencies[] = uc_store
dependencies[] = uc_cart

U .install dokument dodajete sljedeće:

<?php

/**
 * @file
 * Installation file for Ubercart custom module.
 */

 /**
  * Implements hook_install().
  */
 function ubercart_custom_install() {

 }

 /**
  * Implements hook_enable().
  */
 function ubercart_custom_enable() {
   drupal_set_message('Ubercart custom has been activated successfully.');
 }

 /**
  * Implements hook_disable().
  */
 function ubercart_custom_disable() {
   drupal_set_message('Ubercart custom has been deactivated successfully.');
 }

 /**
  * Implements hook_uninstall().
  */
 function ubercart_custom_uninstall() {

 }

Dokument .module treba sadržavati sljedeće:

<?php
/**
  * @file
  * Alter ubercart module
  */

Zadnji dokument je ciljano ostavljen prazan, kako bi kasnije u njega mogli dodati kod. 
Dokument ubecart_custom možete postaviti u sites/all/modules/. Ukoliko ste pratili sve korake, već u ovoj fazi možete pronaći Vaš modul u listi modula te instalirati ga. Stoga, instalirajmo novi modul!

Nakon instalacije vraćamo se na .module dokument. Implementirati ćemo hook_block_view_alter kako bi izmijenili blok naslova košarice u svrhu prikazivanja broja artikala. U ovom koraku morate voditi računa o tome da je opcija "Display the shopping cart icon in the block title" ticked u konfiguraciji bloka, jer ćemo ju ovim kodom zaobići.

Nakon implementacije linija, postavite sljedeći kod u Vaš modul:

/**
* Implementation of hook_block_view_alter().
*
*/
function ubercart_custom_block_view_alter(&$data, $block) {
  if ($block->delta == 'cart') {
    $items_number = uc_cart_get_total_qty();
    $title = $block->title;
    $title .= t('@items_number', array('@items_number' => $items_number));

    $block->title = $title;
  }
}

U ovoj fazi bi već trebali imati prikazan broj artikala pored košarice. Ali nije baš lijepo, zar ne?Cart with the item number Pošto je blok već izmijenjen od strane Ubecart modula, broj proizvoda se prikazuje automatski  u rangu klase cart-block-title-bar. Stoga je naš sljedeći korak poraditi na ovom dijelu prikaza.

Ono što za sam prikaz možemo napraviti jest dodati CSS kod:

#block-uc-cart-cart {
  padding-right: 20px;
}
.cart-block-title-bar {
  display: block;
  position: absolute;
  top: -0.5em;
  left: 110%;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  min-width: 20px;
  font-size: 14px;
  color: #fff;
  text-align: center;
  white-space: nowrap;
  background-color: #777;
  border-radius: 10px;
}

Nakon dodavanja koda Vaša košarica i prikaz broja artikala koji se u njoj nalaze bi trebali izgledati ovako:Item counter themed

CSS kod možete prilagoditi Vašim potrebama. 

Za kraj, pokušajte dodavati i uklanjati proizvode iz košarice kako bi vidjeli ažuriranje brojača.

About the writer

victor.bourgade

Victor is a web developer passionnated in drupal and bootstrap technologies. He likes challenges and beautiful designs.

When not behind his computer you'll find him drinking beers with friends or in the middle of nowhere hiking with his dog.